{% extends 'base.html' %}

{% block title %}{{question.title}}{% endblock %}
{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='question_detail_comment.css' ) }}">
{% endblock %}

{% block body %}

<div class="row mt-4">

  <div class="col"></div>
  <div class="col-6" style="background:#fff;padding:20px">
    <h3 class="page-title" style="text-align:center;">{{question.title}}</h3>
    <p class="question-info" style="text-align:center;font-size:14px;color: #00000080">
      <span>作者：{{question.author.username}}</span>
      <span>时间：{{question.create_time}}</span>
    </p>
    <hr>
    <p class="question-content">{{question.content}}</p>
    <hr>

    <!--评论-->
    <form method="POST" action="{{url_for('qa.question_answer')}}">
      <input type="hidden" name="question_id" value="{{question.id}}">
      <h5>评论({{question.answers | length}}):</h5>
      <div class="form-group">
        <input type="text" name="content" placeholder="请填写评论" class="form-control">
      </div>
      {% with messages = get_flashed_messages() %}
        {% for message in messages %}
          {% if message %}
            <div class="text-danger text-left">{{message}}</div>
          {% endif %}
        {% endfor %}
      {% endwith %}
      <div class="form-group text-right">
        <button type="submit" placeholder="请填写评论" class="btn btn-primary">评论</button>
      </div>
    </form>

    <!--历史评论-->
    <ul class="comment-group">
      {% if question.answers %}
        {% for answer in question.answers %}
        <li>
          <div class="user-info">
            <img src="{{url_for('static',filename='images/avatar.jpg')}}" alt="" class="avatar">
            <span class="username">{{answer.author.username}}</span>
            <span class="create-time">{{answer.create_time}}</span>
          </div>
          <p class="comment-content">{{answer.content}}</p>
        </li>
        {% endfor %}
      {% endif %}
    </ul>
  </div>
  <div class="col"></div>
</div>

{% endblock %}